<script lang="ts" setup>
import InputVant from "@/components/HYInut/input.vue";
import { ref, reactive, watch, onMounted } from "vue";
import { useRouter } from "vue-router";
import LoginUser from "@/image/new_img/login_user.svg";
import LoginPwd from "@/image/new_img/login_pwd.svg";
import QuxiaoyulanBai from "@/image/new_img/quxiaoyulan_bai.png";
import disableImg from "@/image/new_img/btnv2_short_disable.png";
import enableImg from "@/image/new_img/btnv2_short_enable.png";
import DeviceDetector from "device-detector-js";
import { PubSubEnum } from "@/types";
import { UserAxios } from "@/api";
import { UserStore } from "@/store";
import sortBy from "lodash";
import PubSub from "pubsub-js";
import { useI18n } from "vue-i18n";
import CryptoJS from "crypto-js";
import { FiltrationFun } from "@/utils";
// import { encrypt, decrypt } from "@/utils/cryptoService";
const { t } = useI18n();
const logonType = ref(0);
const router = useRouter();
const userStore = UserStore();
const errInputPasswd = ref("");
const gotopage = sortBy.throttle(() => {
  errInputPasswd.value = updata.passwd;
  updata.passwd = CryptoJS.MD5(updata.passwd).toString();
  // const data = {
  //   param: encrypt(JSON.stringify(updata)),
  // };
  if (updata.passwd !== "" && updata.username !== "") {
    PubSub.publish(PubSubEnum.SHOW_LOADING);
    UserAxios.login(updata)
      .then((res: any) => {
        userStore.setUserLoginInfo(res);
        //登陆的事件回传
        FiltrationFun.setReportEvent("SubmitApplication");
        localStorage.setItem("userName", updata.username);
        localStorage.setItem("passwd", errInputPasswd.value);
        PubSub.publish(PubSubEnum.UPDATE_USERINFO);
        PubSub.publish(PubSubEnum.HIDE_LOADING);
        router.back();
      })
      .catch(() => {
        updata.passwd = errInputPasswd.value;
      })
      .finally(() => {
        PubSub.publish(PubSubEnum.HIDE_LOADING);
        logonType.value = 1;
      });
  }
}, 2000);
const updata = reactive({
  username: "",
  passwd: "",
  device: "",
  deviceId: FiltrationFun.getDeviceId() || "",
});
onMounted(async () => {
  const userName = localStorage.getItem("userName");
  const passwd = localStorage.getItem("passwd");
  if (userName && passwd) {
    updata.username = userName;
    updata.passwd = passwd;
  }
  const deviceDetector = new DeviceDetector();
  const { os } = deviceDetector.parse(navigator.userAgent);
  updata.device = os !== null ? os.name : "获取不到";
});
//账号和密码的验证状态
const passwordCheckType = ref(0);
//输入框的背景类型
const monitorType = ref(0);
const brazilNumberCheck = new RegExp(/^[0-9]{6,25}$/);
const passWordCheck = new RegExp(/^[0-9A-Za-z]{8,20}$/);
//获取用户名
const monitorInput = res => {
  if (brazilNumberCheck.test(res) || res.length === 0) {
    monitorType.value = 0;
  } else {
    monitorType.value = 1;
  }
  updata.username = res;
};
//判断是否可以注册
const provingConditionType = ref(false);
//获取密码
const monitorInputPassword = res => {
  if (passWordCheck.test(res) || res.length === 0) {
    passwordCheckType.value = 0;
    // if (passWordCheck.test(res)) {
    //   updata.passwd = res;
    // }
  } else {
    passwordCheckType.value = 1;
  }
  updata.passwd = res;
};
//监听参数，用户名，密码，重置密码
watch(
  [() => updata.passwd, () => updata.username],
  newValue => {
    if (brazilNumberCheck.test(newValue[1]) && passWordCheck.test(newValue[0])) {
      provingConditionType.value = true;
      logonType.value = 1;
    } else {
      provingConditionType.value = false;
      logonType.value = 0;
    }
  },
  { deep: true },
);
</script>

<template>
  <div class="input-content">
    <InputVant
      :setValue="updata.username"
      ref="getUserNameRef"
      :letf-icon="LoginUser"
      input-type="number"
      :placeholder="t('inputPlaceholder.loginAccount')"
      :monitor-type="monitorType"
      @monitor-input="monitorInput"
    >
      <template #errorMessage>
        <div v-show="monitorType == 1" class="signup-item-error">
          {{ t("login.correctAccountNumber") }}
        </div>
      </template>
    </InputVant>
    <InputVant
      :setValue="updata.passwd"
      class="input-segment-frame"
      :letf-icon="LoginPwd"
      :placeholder="t('inputPlaceholder.loginPassword')"
      :monitor-type="passwordCheckType"
      :rigth-icon="QuxiaoyulanBai"
      input-type="password"
      @monitor-input="monitorInputPassword"
      ref="inputRef"
    >
      <template #errorMessage>
        <div v-show="passwordCheckType == 1" class="signup-item-error">
          {{ t("login.correctPassword") }}
        </div>
      </template>
    </InputVant>
    <div
      class="bottom-frame df ai-center jc-center"
      :class="{ 'text-select': logonType != 1 }"
      :style="{ backgroundImage: `url(${logonType == 0 ? disableImg : enableImg})` }"
      @click="gotopage"
    ></div>
  </div>
</template>
<style lang="less" scoped>
.input-segment-frame {
  margin-top: 18.0781px;
}
.bottom-frame {
  width: 300px;
  height: 100px;
  margin: auto;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.45);
  background-size: cover;
  background-repeat: round;
  margin-top: 46px;
}
.signup-item-error {
  font-size: 28px;
  color: #eb5757;
  padding: 11px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  line-height: 40px;
  padding-left: 40px;
}
</style>
